<template>
	<div class="container">

		<topHeader></topHeader>

		<div class="banner section section1">
			<section id="banner_box" class="banner_box slider block" >
				<!--  -->
				<el-carousel trigger="click" :interval="400000"   arrow="never" :height="bannerHeight">
					<el-carousel-item>
						<img
							style="width:100%;"
							src="../assets/image/banner_2.jpg"
							alt
						/>
						<div class="banner_click banner_click2" @click="clickConsultant">
							<img src="../assets/image/banner_click2.png" alt="">
						</div>
					</el-carousel-item>
					<el-carousel-item>
						<img
							class="banner_img"
							ref="banner"
							style="width:100% "
							src="../assets/image/banner_1.png"
							alt
						/>
						<div class="banner_click banner_click1" @click="consultationClick">
							<img src="../assets/image/banner_click1.png" alt="">
						</div>
					</el-carousel-item>
					
					<div class="clear"></div>
				</el-carousel>
			</section>
		</div>

		<div class="section section2" id="section2">
			<div class="wrapper">
				<div class="title">家门口的口碑教育</div>
				<div id="certify">
					<swiper
							:options="swiperOption"
							ref="mySwiper"
							class="swiper-container gallery-top"
						>
							<!-- slides --> 
							<swiper-slide v-for="(item, index) in parentList" :key="index" >
								<img :src="item.imgUrl" />
								<div class="desc_box">
									<div>
										<p><i></i>家长 : {{item.parent}}</p>
										<p><i></i>地址 : {{item.address}}</p>
									</div>
								</div>
							</swiper-slide>
					</swiper>
					<div class="info_box">
						<p>{{caseList[activeIndex].desc}}</p>
						<i class="lone_line"></i> 
						<div>
							<span><i>{{caseList[activeIndex].name}}</i>小朋友于<i>{{caseList[activeIndex].time}}</i>入读<i>{{caseList[activeIndex].address}}</i></span>
							<span>成长课程 : <i>{{caseList[activeIndex].class}}</i></span>
							<span>课程顾问 : <i>{{caseList[activeIndex].consultant}}</i></span>
							<i class="btn_ask btn" @click="clickConsultant"></i>
							<div class="clear"></div>
						</div>
					</div>
					<div class="swiper-pagination"></div>
					<div class="swiper-button-prev swiper-button-prev1"></div>
					<div class="swiper-button-next swiper-button-next1"></div>
				</div>
			</div>
		</div>
		
		<div class="section section3 wrapper" id="section3">
			<h3 class="title">北大、北师大专家引领的教育团队</h3>

			<div class="zhuanjia_box">
				<div class="left">
					<img src="../../static/image/zhuanjia.png" alt="">
				</div>
				<div class="right">
					<p class="zhuanjia_name">首席顾问 尚俊杰教授</p>
					<p>北京大学教育学院副院长，北京大学学习科学实验室执行主任，中国教育技术协会教育游戏专业委员会理事长</p>
				</div>
			</div>
			<p class="zebra_desc">斑马公学，由北京大学学习科学实验室《中国学习计划》、中国教育游戏专委会，中国教育技术协会十三五重大课题组、北京师范大学、中国教科院等专家引领，核心成员来自北大、北师大、美国纽约州立大学等名校团队。</p>

			<ul class="team_list">
				<!-- :class="{'active': team_id == index}" -->
				<li v-for="(item, index) in expertList" :key="index" class="team_item"  @click="teamClick(index)">
					<span class="icon_pos">{{item.pos}}</span>
					<img :src="item.avatar" class="avatar">
					<div class="mask_bg"></div>
					<span class="name">{{item.name}}</span>
					<div  class="line"></div>
					<span class="desc1 desc" >{{item.desc1}}</span>
					<span class="desc2 desc">{{item.desc2}}</span>
				</li>
				<div class="clear"></div>
			</ul>
			<!-- <div class="dashed_line"></div> -->
			<div style="position: relative;" class="team_list2">
				<swiper 
					:options="swiperOption2"
					ref="mySwiper"
					class="swiper-container gallery-top ">
					<swiper-slide v-for="(item, index) in teacherList" :key="index">
						<span class="icon_pos">{{item.pos}}</span>
						<img :src="item.avatar" class="avatar">
						<span class="name">{{item.name}}</span>
						<div  class="line"></div>
						<span class="desc1 desc">{{item.desc1}}</span>
						<span class="desc2 desc">{{item.desc2}}</span>
					</swiper-slide>
					
				</swiper>
				<div class="swiper-button-prev swiper-button-prev2"></div>
				<div class="swiper-button-next swiper-button-next2"></div>
			</div>
			
		</div>

		<div class="section section4 wrapper" id="section4">
			<h3 class="title">见证每一个天使的成长风采</h3>
			<ul class="video_list">
				<li class="video_item" v-for="(item, index) in videoList" :key="index">
					<div class="video_box">
						<img :src="item.src" alt="">
						<!-- <video src="../assets/image/1.mp4" :controls="!item.playStutas" ref="video" @ended="videoEnd(item)"></video> -->
						<span @click="videoPlay(index)" class="icon_play" v-if="item.playStutas"></span>
					</div>

					<div class="info_box">
						<span class="order fl">0{{index + 1}}</span>
						<div class="info fl">
							<div class="video_title">{{item.title}}</div>
							<span class="desc">{{item.desc}}</span>
						</div>
						<div class="clear"></div>
					</div>
					
				</li>
			</ul>

			<div class="more_info">
				<span>想了解更多孩子风采?</span>
				<span class="btn btn_contact_us" @click="clickConsultant">联系课程顾问</span>
			</div>
		</div>

		<div class="section section5" id="section5">
			<div class="wrapper">
				<h3 class="title">让最懂孩子教育的人做教育</h3>
				<ul class="advantage_list">
					<li class="advantage_item fl">
						<div class="icon">
							<img src="../assets/image/icon1.png" alt="">
						</div>
						<span class="title">专业背景</span>
						<span class="desc">北大学习科学实验室</span>
						<span class="desc">纽约州立大学，北师大专家指导创办</span>
					</li>
					<li class="advantage_item fl">
						<div class="icon">
							<img src="../assets/image/icon2.png" alt="">
						</div>
						<span class="title">专业师资</span>
						<span class="desc">本科学历教师，对接重点小学</span>
						<span class="desc">3-10年教学经验，严格考核把关</span>
					</li>
					<li class="advantage_item fl">
						<div class="icon">
							<img src="../assets/image/icon3.png" alt="">
						</div>
						<span class="title">专业透明</span>
						<span class="desc">上课全程直播，随时随地用手机</span>
						<span class="desc">查看孩子上课状态，100%透明</span>
					</li>
					<li class="advantage_item fl">
						<div class="icon">
							<img src="../assets/image/icon4.png" alt="">
						</div>
						<span class="title">专业课程</span>
						<span class="desc">国内义务教育标准、美国CCSS新课标</span>
						<span class="desc">课程体系符合3-9岁孩子的认知规律</span>
					</li>
					<div class="clear"></div>
				</ul>
			</div>
		</div>

		<div class="section section6 wrapper" id="section6">
			<h3 class="title">5大专业课程体系，激发孩子受益一生的原动力</h3>
			<ul class="curriculum_list">
				<li>
					<div class="img_box fl">
						<img src="../assets/image/img1.jpg" alt="">
						<p class="maskdesc">名校精英幼小衔接班</p>
					</div>
					<div class="desc_box fl">
						<i></i>
						<p>培养规则意识，提高孩子专注力，拓宽孩子知识边界，增强自信</p>
						<p>为进入小学做好知识、思维、习惯的全方位准备</p>
						<p>塑造孩子受益一生的学习原动力</p>
						<!-- <div class="btn btn_test">看看孩子的入学水平怎么样？</div> -->
					</div>
					<div class="clear"></div>
				</li>

				<li>
					<div class="desc_box fl">
						<i></i>
						<p>运用CLIL教学法，将英语学习与学科思维提升完美融合</p>
						<p>全景化浸入式学习体验，让孩子爱上英语</p>
						<p>回归语言教学本质，塑造中国儿童第二母语</p>
					</div>
					<div class="img_box fr">
						<img src="../assets/image/img2.png" alt="">
						<p class="maskdesc">3-9岁美式全景英语</p>
					</div>
				</li>

				<li>
					<div class="img_box fl">
						<img src="../assets/image/img3.png" alt="">
						<p class="maskdesc">3-9岁未来数学思维</p>
					</div>
					<div class="desc_box fl">
						<i></i>
						<p>四大领域、十二项思维能力全面提升 </p>
						<p>多元化教具、游戏化教学，让孩子爱上数学</p>
						<p>培养勤于动手、乐于动脑、勇于表达的未来精英</p>
					</div>
					
				</li>
				
				<li>
					<div class="desc_box fl">
						<i></i>
						<p>提高识字量，为孩子打开知识的大门</p>
						<p>增强阅读理解能力，培养自主阅读习惯</p>
						<p>夯实语文根基，笑迎大语文时代</p>
					</div>
					<div class="img_box fr">
						<img src="../assets/image/img4.png" alt="">
						<p class="maskdesc">4-8岁识字阅读</p>
					</div>
				</li>

				<li>
					<div class="img_box fl">
						<img src="../assets/image/img5.png" alt="">
						<p class="maskdesc">4-8岁表演与表达</p>
					</div>
					<div class="desc_box fl">
						<i></i>
						<p>提高语言表达能力，增强自信</p>
						<p>提高肢体协调能力，塑造良好体型体态</p>
						<p>综合提升想象力、创造力、领导力、人际交往能力</p>
					</div>
					
				</li>
			</ul>
			<div class="more_info">
				<span>想了解更多定制课程？</span>
				<span class="btn btn_contact_us" @click="clickConsultant">联系课程顾问</span>
			</div>
		</div>

		<div class="section section7 wrapper" id="section7">
			<h3 class="title">校区地址</h3>
			<div class="map_box fl">
				<iframe ref="iframer" style="width:100%;height:100%;" src="../../static/index_home.html"
              frameborder="0"></iframe>
			</div>
			<div class="school_box fl">
				<div>
					<div style="position:relative">
						<span class="change_school_area">校区选择 : </span>
						<el-select v-model="schoolValue" placeholder="请选择校区" @change="selectChange">
							<el-option
								v-for="(item) in schoolList"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="school_info">
						<p>详细地址 : {{schoolInfo.address}}</p>
						<p>附近站点 : {{schoolInfo.nearByBus}}</p>
						<p>联系电话 : {{schoolInfo.phone}}(或扫码咨询)</p>
					</div>
				</div>

				<div class="school_img_box">
					<!-- 北辰 -->
					<template v-if="schoolSelectIndex == 1">	
						<img src="../assets/image/school_img4.png" class="school_img" alt="">
						<img src="../assets/image/school_qrcode2.jpg" class="school_qrcode">
					</template>

					<!-- 通大家园 -->
					<template v-if="schoolSelectIndex == 2">
						<img src="../assets/image/school_img1.png" class="school_img" alt="">
						<img src="../assets/image/school_qrcode1.jpg" class="school_qrcode">
					</template>

					<!-- 华远 -->
					<template v-if="schoolSelectIndex == 3">
						<img src="../assets/image/school_img3.png" class="school_img" alt="">
						<img src="../assets/image/school_qrcode1.jpg" class="school_qrcode">
					</template>

					<!-- 华业 -->
					<template v-if="schoolSelectIndex == 4">
						<img src="../assets/image/school_img2.png" class="school_img" alt="">
						<img src="../assets/image/school_qrcode2.jpg" class="school_qrcode">
					</template>

					<!-- 梨园柳岸方园中心 -->
					<template v-if="schoolSelectIndex == 5">	
						<img src="../assets/image/school_img4.png" class="school_img" alt="">
						<img src="../assets/image/school_qrcode3.jpg" class="school_qrcode">
					</template>

					<!-- 管庄远洋一方中心 -->
					<template v-if="schoolSelectIndex == 6">	
						<img src="../assets/image/school_img4.png" class="school_img" alt="">
						<!-- <img src="../assets/image/school_qrcode2.jpg" class="school_qrcode"> -->
					</template>

					
				</div>
			</div>
			<div class="clear"></div>
			<div class="desc">
				<i></i>
				<span>我们正在努力将最优质的儿童教育资源带到您的社区，更多校区敬请期待！</span>
			</div>
		</div>
		<copyRight></copyRight>

		<div class="side_bar">
			<ul class="side_bar_list">
				<li @click="clickConsultant">
					<i></i>
					<span>课程咨询</span>
				</li>
				<li 
				
				>
					<i></i>
					<span>公众号</span>
					<!-- <transition name="slide-to-right"> -->
						<img src="../assets/image/wxQrcode.jpg" class="wxQrcode">
					<!-- </transition> -->
				</li>
				<li @click="showFeedbackPop">
					<i></i>
					<span>意见反馈</span>
				</li>
				<li @click="backTop">
					<i></i>
					<span>返回顶部</span>
				</li>
			</ul>
		</div>

		<div class="mask" v-if="maskShowStatus">
			<div class="popup">
				<template v-if="showPopName == '预约试听' || showPopName == '课程咨询'">
					<div  class="appointment_popup">
						<div class="step1" v-if="appointmentStep == 1">
							<i class="icon_close_small"  @click="maskShowStatus = false"></i>
							<h4 class="title">{{showPopName == '预约试听' ? '立即预约' : '课程咨询'}}</h4>
							<el-form :model="formAppointment" label-position="left"  ref="formData" class="rule_form">

								<el-form-item prop="linkPhone">
									<el-input v-model="formAppointment.linkPhone" placeholder="请输入手机号码(必填)" maxlength=11></el-input>
								</el-form-item>

								<el-form-item prop="studentName">
									<el-input v-model="formAppointment.studentName" placeholder="请输入您的孩子姓名"></el-input>
								</el-form-item>

								<el-form-item prop="schoolId">
									<el-select v-model="formAppointment.schoolId" placeholder="附近校区">
										<el-option :label="item.dicLabel" :value="item.dicCode" 
											v-for="(item, index) in schoolAreaList" :key="index">
										</el-option>
									</el-select>
								</el-form-item>

								<el-form-item prop="age">
									<el-select v-model="formAppointment.childAge" placeholder="请选择孩子年龄">
										<el-option :label="item.dicLabel" :value="item.dicCode" 
											v-for="(item, index) in studentAgeList" :key="index">
										</el-option>
									</el-select>
								</el-form-item>

								<el-form-item prop="curriculum">
									<el-select v-model="formAppointment.productId" placeholder="请选择试听课程">
										<el-option :label="item.productName" :value="item.productId" 
											v-for="(item, index) in classList" :key="index">
										</el-option>
									</el-select>
								</el-form-item>

								<div class="btn_box">
									<div class="btn btn_submit_appointment" @click="nextStep('appointmentStep',2)">提交预约</div>
								</div>

								<span class="desc">
									<span>完善以上信息，权威的课程顾问将会</br>第一时间联系您哦！</span>
									
								</span>

							</el-form>
						</div>

						<div class="step2" v-if="appointmentStep == 2">
							<i class="icon_close_small" @click="maskShowStatus = false"></i>
							<i class="step"></i>
							<el-form :model="verificodeData" label-position="left"  ref="formData" class="rule_form">

								<el-form-item prop="phone">
									<el-input v-model="verificodeData.phone" readonly placeholder=""></el-input>
								</el-form-item>

								<el-form-item prop="verificationCode" style="position: relative;">
									<el-input v-model="verificodeData.verificationCode" placeholder="请输入验证码" maxlength=6></el-input>
									<div class="veri_code fr" @click="initValCode" v-if="veri_time==0">获取验证码</div>
									<div class="veri_code fr" v-if="veri_time!==0">{{veri_time}} 秒</div>
									<div class="clear"></div>
								</el-form-item>

								<div class="btn_box">
									<div class="btn btn_submit_appointment" @click="appointmentSubmit('appointmentStep',3)">立即预约</div>
								</div>

								


							</el-form>
						</div>

						<div class="step3 appointment_success" v-if="appointmentStep == 3" @click="maskShowStatus = false;">
							<i class="icon_success"></i>
							<p class="success_msg">预约成功</p>
							<template v-if="showPopName == '预约试听'">
								<p class="success_desc">您已成功预约试听课程 </p>
								<p class="success_desc">稍后将有专业课程顾问联系您</p>
							</template>
							<template v-if="showPopName == '课程咨询'">
								<p class="success_desc">稍后专业的课程顾问为您提供一对一咨询服务 </p>
								<p class="success_desc">请注意接听电话哦！</p>
							</template>
						</div>
					</div>
				</template>

				<template v-if="showPopName == '咨询'">
					<div  class="consultation_popup">
						<div class="step1" v-if="consultationStep == 1">
							<i class="icon_close_small"  @click="maskShowStatus = false"></i>
							<h4 class="title">了解详情</h4>
							<p class="sub_title">完善以下信息，掌握第一手的<span>入学政策</span></p>
							<el-form :model="formAppointment" label-position="left"  ref="formData" class="rule_form">

								<el-form-item prop="linkPhone">
									<el-input v-model="formAppointment.linkPhone" placeholder="请输入手机号码(必填)" maxlength=11></el-input>
								</el-form-item>

								<el-form-item prop="name">
									<el-input v-model="formAppointment.studentName" placeholder="请输入您的孩子姓名"></el-input>
								</el-form-item>

								<el-form-item prop="schoolArea">
									<el-select v-model="formAppointment.schoolId" placeholder="附近校区">
										<el-option :label="item.dicLabel" :value="item.dicCode" 
											v-for="(item, index) in schoolAreaList" :key="index">
										</el-option>
									</el-select>
								</el-form-item>

								<el-form-item prop="age">
									<el-select v-model="formAppointment.childAge" placeholder="请选择孩子年龄">
										<el-option :label="item.dicLabel" :value="item.dicCode" 
											v-for="(item, index) in studentAgeList" :key="index">
										</el-option>
									</el-select>
								</el-form-item>

								<div class="btn_box">
									<div class="btn btn_submit_appointment" @click="nextStep('consultationStep', 2)">提交信息</div>
								</div>

								<!-- <span class="desc">
									完善以上信息，权威的课程顾问将会</br>第一时间联系您哦！
								</span> -->

							</el-form>
						</div>

						<div class="step2" v-if="consultationStep == 2">
							<i class="icon_close_small" @click="maskShowStatus = false"></i>
							<i class="step"></i>
							<el-form :model="verificodeData" label-position="left"  ref="formData" class="rule_form">

								<el-form-item prop="phone">
									<el-input v-model="verificodeData.phone" readonly placeholder=""></el-input>
								</el-form-item>

								<el-form-item prop="verificationCode" style="position: relative;">
									<el-input v-model="verificodeData.verificationCode" placeholder="请输入验证码" maxlength=6></el-input>
									<div class="veri_code fr" @click="initValCode" v-if="veri_time==0">获取验证码</div>
									<div class="veri_code fr" v-if="veri_time!==0">{{veri_time}} 秒</div>
									<div class="clear"></div>
								</el-form-item>

								<div class="btn_box">
									<div class="btn btn_submit_appointment" @click="appointmentSubmit('consultationStep',3)">立即预约</div>
								</div>

							</el-form>
						</div>

						<div class="step3 consultation_success" v-if="consultationStep == 3" @click="maskShowStatus = false;">
							<i class="icon_success"></i>
							<p class="success_msg">预约成功</p>
							<p class="success_desc">排队成功 </p>
							<p class="success_desc">稍后将有专业课程顾问为您答疑解惑哦！</p>
						</div>
					</div>
				</template>

				<template v-if="showPopName == '意见反馈'">
					<div class="feedback_popup">
						<div class="step1" v-if="feedbackStep == 1">
							<i class="icon_close_small"  @click="maskShowStatus = false"></i>
							<p class="sub_title">尊敬的家长朋友：</p>
							<p>
								非常感谢您对斑马公学的厚爱，关于我们的服务如您有任何批评和建议， 诚邀您在此进行反馈，我们将无比珍视这个与孩子一起成长的机会！
              </p>

							<el-form :model="formFeedBack" label-position="left" label-width="75px"  ref="formData" class="rule_form">
								<el-form-item prop="linkPhone" label="联系电话">
									<el-input v-model="formFeedBack.telephone" placeholder="请输入手机号码(必填)" maxlength=11></el-input>
								</el-form-item>
							</el-form>
							<el-form :model="formFeedBack" label-position="left" ref="formData" class="rule_form">
								<el-form-item prop="linkPhone">
									<el-input type="textarea" v-model="formFeedBack.comment" :rows="7" placeholder="评语 : "></el-input>
								</el-form-item>
							</el-form>

							<div class="btn_box">
								<div class="btn btn_submit_appointment" @click="feedbackSubmit('feedbackStep', 2)">提交反馈</div>
							</div>
						</div>
						<div class="step3" v-if="feedbackStep == 3" @click="maskShowStatus = false;">
							<i class="icon_success"></i>
							<p class="success_msg">提交成功</p>
							<p class="success_desc">感谢您对斑马公学的宝贵意见</p>
							<p class="success_desc">您的每一次鞭策都是我们不断走向更加优秀的原动力</p>
						</div>
					</div>
				</template>


			</div>
		</div>

		<transition name="slide-fade">
			<div class="bottom_bar" v-if="bottomBarShow && !forceCloseBottomBar">
				<div class="wrapper">
					<el-form :model="formAppointment_bottom" :inline="true" ref="formData" class="rule_form">

						<el-form-item  style="width: 170px;">
							<el-input v-model="formAppointment_bottom.linkPhone" placeholder="请输入手机号码(必填)" maxlength=11></el-input>
						</el-form-item>


						<el-form-item prop="name" style="width: 165px;">
							<el-input v-model="formAppointment_bottom.studentName" placeholder="请输入您的孩子姓名"></el-input>
						</el-form-item>

						<el-form-item prop="schoolArea" style="width: 165px;">
							<el-select @change="changeSchool" v-model="formAppointment_bottom.schoolId" placeholder="附近校区">
								<el-option :label="item.schoolName" :value="item.schoolId" 
									v-for="(item, index) in schoolAreaList" :key="index">
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item prop="age" style="width: 165px;">
							<el-select v-model="formAppointment_bottom.childAge" placeholder="请选择孩子年龄">
								<el-option :label="item.dicLabel" :value="item.dicCode" 
									v-for="(item, index) in studentAgeList" :key="index">
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item prop="curriculum" style="width: 165px;">
							<el-select v-model="formAppointment_bottom.productId" placeholder="请选择试听课程">
								<el-option :label="item.productName" :value="item.productId" 
									v-for="(item, index) in classList" :key="index">
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item>
							<div class="btn_bottom_appointment" @click="bottomAppointment">立即预约线下试听课</div>
						</el-form-item>
						<el-form-item>
							<i class="icon_close_mini" @click="closeBottomBar"></i>
						</el-form-item>
							
					</el-form>
				</div>
			</div>
		</transition>

		

	</div>
</template>


<script>
import copyRight from './common/copyRight'
import topHeader from './common/topHeader'

let myVue = {}
export default {
	name: 'home',
	data() {
		return {
			maskShowStatus: false,
			tab_id: 0,
			team_id: 0,
			bottomBarShow: false,
			forceCloseBottomBar: false,
			showWxQrcode: false,
			bannerHeight: '422px',
			expertList: [
				{
					name: '付博士',
					pos: '教研',
					desc1: '北京师范大学学士、硕士，美国纽约州立大学(SUNY)博士生。曾任职于北京市重点中学，前智课教育高级课程产品经理 全通教育、猿辅导特约课程顾问，国家科研项目教师培训中心特聘讲师',
					desc2: '',
					avatar: '../../static/image/zhuanjia4.jpg'
				},
				{
					name: '聂老师',
					pos: '教研',
					desc1: '北京大学英语文学学士、教育学硕士，北京大学学习科学实验室《中国学习计划》研究成员，拥有多年国内外儿童教育研究经验',
					desc2: '',
					avatar: '../../static/image/guwen1.jpg'
				},
				{
					name: '陈老师',
					pos: '教研',
					desc1: '毕业于北京理工大学，十三五重大课题“幼儿游戏化课程创新实验研究”课题组成员， 原《The Saseme Parent & Child Series》芝麻街亲子系列课程中国区负责人',
					desc2: '',
					avatar: '../../static/image/guwen2.jpg'
				},
				{
					name: '张老师',
					pos: '教研',
					desc1: '北京大学理学学士、硕士，北京大学校长实名推荐资格获得者。曾荣获《i创达人》《菁英计划》等多项创新创业奖，《法律职业资格证》持证人，热爱游戏化教育',
					desc2: '',
					avatar: '../../static/image/guwen5.jpg'
				},
				{
					name: '蒋老师',
					pos: '教研',
					desc1: '北京大学教育学硕士学位，教育部中央电化教育馆助理研究员，香港中文大学资讯科技教育促进中心研究员',
					desc2: '',
					avatar: '../../static/image/zhuanjia2.png'
				},
				{
					name: '孙博士',
					pos: '教研',
					desc1: '北京师范大学学前教育学博士， 在北京教育学院学前教育系任《学前教育概论》、 《游戏设计与指导》、《幼儿智力开发》课程教师',
					desc2: '',
					avatar: '../../static/image/zhuanjia3.jpg'
				},
				{
					name: '孙老师',
					pos: '教研',
					desc1: '学前教育专业，拥有播音主持和舞蹈特长，8年教学经验，善于培养孩子的文字和表达能力，斑马公学区域校长，斑马公学语文教学组长，资深语文教师',
					desc2: '',
					avatar: '../../static/image/guwen4.png'
				},
				{
					name: '刘老师',
					pos: '教研',
					desc1: '数学系师范专业学士学位，幼儿园园长，十三五课题《幼儿游戏化课程的创新与实践研究》研究成员，斑马公学区域校长，斑马公学数学教学组长，数学思维教师',
					desc2: '',
					avatar: '../../static/image/guwen3.jpg'
				},
			],
			teacherList: [
				// {
				// 	name: '常老师',
				// 	pos: '教师',
				// 	desc1: '北京大学教育学院副院长',
				// 	desc2: '教育技术系主任',
				// 	avatar: '../../static/image/teacher_1.png'
				// },
				{
					name: '贾老师',
					pos: '教师',
					desc1: '小学高级教师，曾在北京市重点小学担任语文、数学老师，认真严谨，拥有40年教学经验',
					desc2: '',
					avatar: '../../static/image/teacher_3.png'
				},
				{
					name: '李老师',
					pos: '教师',
					desc1: '语文教育专业，4年教学经验，善于游戏化教学，课堂生动有趣，极富感染力',
					desc2: '',
					avatar: '../../static/image/teacher_4.png'
				},
				{
					name: '达达老师',
					pos: '教师',
					desc1: '学前教育专业，具备三年教学经验，深入了解幼小阶段学习规律，善于和孩子沟通，专业靠谱',
					desc2: '',
					avatar: '../../static/image/teacher_5.png'
				},
				{
					name: '吕老师',
					pos: '教师',
					desc1: '学前教育专业，掌握幼儿教育学、心理学的理论，能在实践中灵活地运用，热爱教育事业',
					desc2: '',
					avatar: '../../static/image/teacher_6.png'
				},
				{
					name: '邵老师',
					pos: '教师',
					desc1: '学前教育专业，掌握蒙台梭利教育法幼儿卫生学的理论，拥有钢琴特长，喜欢和孩子交朋友',
					desc2: '',
					avatar: '../../static/image/teacher_7.png'
				},
				// {
				// 	name: '苗苗老师',
				// 	pos: '教师',
				// 	desc1: '北京大学教育学院副院长',
				// 	desc2: '教育技术系主任',
				// 	avatar: '../../static/image/teacher_8.png'
				// },
				{
					name: '宋老师',
					pos: '教师',
					desc1: '小学教育专业，拥有超过三年的语文教学经验，拥有美术和舞蹈艺术特长，具备良好的亲和力',
					desc2: '',
					avatar: '../../static/image/teacher_9.png'
				},
				// {
				// 	name: '小雪老师',
				// 	pos: '教师',
				// 	desc1: '北京大学教育学院副院长',
				// 	desc2: '教育技术系主任',
				// 	avatar: '../../static/image/teacher_10.png'
				// },
			],	
			videoList: [
				{
					src: '../../static/image/video_img3.jpg',
					title: '快乐进行曲，学习正当时',
					desc: '',
					playStutas: true,
					ended: false,
				},
				{
					src: '../../static/image/video_img2.jpg',
					title: '授人以鱼，亦授人以渔',
					desc: '',
					playStutas: true,
					ended: false,
				},
				{
					src: '../../static/image/video_img1.jpg',
					title: '以德润身，以文化人',
					desc: '',
					playStutas: true,
					ended: false,
				},
			],
			activeIndex: 0,
			caseList: [
				{
					desc: '今天是小宝贝儿学校开放日，本来是怀着一颗平常心去参加的，因为像这样的活动我也参加三四回，为什么呢？了解我的人你们懂得，但我真的不得不说一下这次的感受：首先，老师们很快地把我们情感带入了这个大家庭，让我们放下了那点不好意思；其次，在课堂学习中，孩子们毫无压力，那么轻松快乐，又有规矩的学到了知识，每个宝都是那么活波可爱，老师也是一样活波可爱；第三，我们还一起包了饺子，一起就餐，说实话他们的饭真的很好吃！他们平时的饭菜比今天还好，今天终于吃到了，虽然我家宝有点挑食，没有每样都吃，但老师都是尊重孩子的，孩子快乐就餐最重要，然后慢慢引导！短短的几个小时，让我感受到的是：热情、快乐、规矩、尊重！在这样的氛围中有哪个小朋友会不愿意来学校呢？我都想每天来！',
					name: '*晋',
					time: '2019年2月18日',
					address: '通大家园中心',
					class: '名校精英幼小衔接班',
					consultant: '达达老师',
				},
				{
					desc: '今天是家长开放日，慕义宝贝担任小班长，看到你当小班长有模有样的、真为你开心🥳感谢老师对孩子的鼓励和肯定、希望你越来越优秀、成为别人的好榜样！',
					name: '李*义',
					time: '2019年2月18日',
					address: '通大家园中心',
					class: '名校精英幼小衔接班',
					consultant: '郭子仪老师',
				},
				{
					desc: '宝贝进步非常大，感谢斑马公学的所有老师。说实话，在幼儿园这两年半一直都是弱弱的，很胆小。但是上了学前班这俩月，明显的变化。真的！昨晚念古诗会好多，感觉一下长大了。主要还是在老师们的帮助下，让豆豆有了自信。真的挺感谢你们的。',
					name: '邵*桐',
					time: '2019年2月25日',
					address: '华业东方玫瑰中心',
					class: '4-8岁识字阅读',
					consultant: '葡萄老师',
				},
				{
					desc: '赠斑马公学（名校精英同学会）：静心呵护育幼苗，教导有方启人生！',
					name: '李*玉',
					time: '2019年2月27日',
					address: '华远铭悦中心',
					class: '3-9岁未来数学思维',
					consultant: '贾老师',
				},
				{
					desc: '瑾泽的管理能力、整理能力得到了很大的提升，从一名调皮的孩子变成一名优秀的班干部，学习力和专注力越来越好。',
					name: '谭*泽',
					time: '2019年2月25日',
					address: '华业东方玫瑰中心',
					class: '3-9岁未来数学思维',
					consultant: '刘宏玉老师',
				},
				{
					desc: '上学前整理能力差，半年之后养成了良好的整理归纳的习惯，经常发自己整理的小视频给老师。专注力特别强，学习越来越认真。',
					name: '王*钰',
					time: '2019年2月25日',
					address: '华业东方玫瑰中心',
					class: '名校精英幼小衔接班',
					consultant: '葡萄老师',
				},
				{
					desc: '荀金是后来的插班生，一开始很不适应学前班，也不知道如何与朋友们相处。经过老师的悉心引导，开始喜欢学校，和小朋友们能够和谐的相处，妈妈特别认可老师和学校，毕业时特地送来蛋糕感谢老师。',
					name: '荀*金',
					time: '2019年2月25日',
					address: '华业东方玫瑰中心',
					class: '3-9岁美式全景英语',
					consultant: '张晓赟老师',
				},
				{
					desc: '（毕业典礼发言部分内容）在最后，请允许我作为家长代表，再次对老师说声感谢，儿子用最朴素的语言表达了老师们最无私的爱。他说，临河里这个校区的老师都喜欢，有最喜欢的和最最喜欢的，没有不喜欢的。我想这也许是对老师最童真、最真挚的赞美！“经师易遇，人师难遇”、“春蚕到死丝方尽，蜡炬成灰泪始干”，再美的赞扬都敌不过孩子发自内心的认可和肯定。作为家长无以为报，送锦旗一面略表精神感谢！ ',
					name: '尤*云',
					time: '2019年2月25日',
					address: '华业东方玫瑰中心',
					class: '名校精英幼小衔接班',
					consultant: '葡萄老师',
				},
				{
					desc: '赠斑马公学（名校精英同学会）：春雨润物，明德育才；泽流及远，千里思源。',
					name: '秦*宸',
					time: '2019年3月25日',
					address: '华远铭悦中心',
					class: '4-8岁识字阅读',
					consultant: 'Abby老师',
				},
				
			],
			parentList: [
				{
					parent: '*晋的妈妈',
					address: '通大家园小区',
					imgUrl: '../../static/image/gaojin.jpg'
				},
				{
					parent: '李*义的妈妈',
					address: '世爵源墅小区',
					imgUrl: '../../static/image/limuyi.jpg'
				},
				{
					parent: '邵*桐的妈妈',
					address: '通州金隅7090小区',
					imgUrl: '../../static/image/shaoruitong.jpg'
				},
				{
					parent: '李*玉的妈妈',
					address: '花石匠小区',
					imgUrl: '../../static/image/liyu.jpg'
				},
				{
					parent: '谭*泽的妈妈',
					address: '通州金隅7090小区',
					imgUrl: '../../static/image/tanjinze.jpg'
				},
				{
					parent: '王*钰的妈妈',
					address: '通州金隅7090小区',
					imgUrl: '../../static/image/wangziyu.jpg'
				},
				{
					parent: '*金的妈妈',
					address: '华业东方玫瑰小区',
					imgUrl: '../../static/image/xunjin.jpg'
				},
				{
					parent: '尤*云的爸爸',
					address: '华业东方玫瑰小区',
					imgUrl: '../../static/image/youhanyun.jpg'
				},
				{
					parent: '秦*宸的爸爸',
					address: '华远铭悦雅园',
					imgUrl: '../../static/image/qinchen.jpg'
				},
				
			],
			swiperOption: {
				watchSlidesProgress: true,
				slidesPerView: 'auto',
				centeredSlides: true,
				loop: true,
				loopedSlides: 9,
				autoplay: false,
				navigation: {
					nextEl: '.swiper-button-next1',
					prevEl: '.swiper-button-prev1',
				},
				preventLinksPropagation: false,
				on: {
					click: function(){
						this.slideTo(this.clickedIndex)
					},
					transitionEnd() {
						// myVue.activeIndex = this.activeIndex % 7;
						myVue.activeIndex = this.realIndex;
					},
					
					progress: function(progress) {
						// console.log(this.activeIndex + 2)

						// console.log(progress);
						for (let i = 0; i < this.slides.length; i++) {
							var slide = this.slides.eq(i);
							var slideProgress = this.slides[i].progress;
							var modify = 1;
							
							if (Math.abs(slideProgress) > 1) {
								modify = (Math.abs(slideProgress) - 1) * 0.8 + 1;
							}
							let translate = slideProgress * modify * 0 + 'px';
							let scale = 1 - Math.abs(slideProgress) / 4;
							let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
							let opcity = 1 - Math.abs(slideProgress) / 3.5;
							slide.transform('translateX(' + translate + ') scale(' + scale + ')');
							slide.css('zIndex', zIndex);
							slide.css('opacity', opcity);
							// slide.css('transform-origin', '0 50%');
							if (Math.abs(slideProgress) > 3) {
								slide.css('opacity', 0);
							}
						}
					},
					setTransition: function(transition) {
						for (var i = 0; i < this.slides.length; i++) {
							var slide = this.slides.eq(i)
							slide.transition(transition);
						}

					}
				}
			},

			swiperOption2: {
				slidesPerView: 4,
				spaceBetween: 30,
				navigation: {
					nextEl: '.swiper-button-next2',
					prevEl: '.swiper-button-prev2',
				},
				// on: {
					
				// }
			},

			schoolAreaList: [],
			classList: [],
			studentAgeList: [
				{
					dicCode: "2",
					dicLabel: "3岁以下",
				},
				{
					dicCode: "3",
					dicLabel: "3岁",
				},
				{
					dicCode: "4",
					dicLabel: "4岁",
				},
				{
					dicCode: "5",
					dicLabel: "5岁",
				},
				{
					dicCode: "6",
					dicLabel: "6岁",
				},
				{
					dicCode: "7",
					dicLabel: "7岁",
				},
				{
					dicCode: "8",
					dicLabel: "8岁",
				},
				{
					dicCode: "9",
					dicLabel: "9岁",
				},
				{
					dicCode: "10",
					dicLabel: "10岁",
				},
			],

			schoolList: [{
          value: '1',
					label: '常营北辰福第中心 · 北京朝阳',
					address: '北京市朝阳区常营常惠路2号楼103北辰福第底商',
					nearByBus: '常营北路(公交)、常营(地铁)',
					phone: '15101073525',
					latitude: "39.9315823897",
        	longitude: "116.5997296572",
        }, {
          value: '2',
          label: '九棵树大稿艺术中心 · 北京通州',
					address: '北京市通州区九棵树西路通大家园小手大爱创客中心2层',
					nearByBus: '大稿新村(公交)、九棵树(地铁站)',
					phone: '15810848852',
					latitude: "39.8710710000",
       	  longitude: "116.6378710000",
        }, {
          value: '3',
          label: '土桥华远铭悦中心 · 北京通州',
					address: '北京市通州区砖厂南里33号楼303(庆丰包子铺楼上)',
					nearByBus: '花石匠小区(公交)、土桥(地铁)',
					phone: '15810848852',
					latitude: "39.8729320000",
        	longitude: "116.6980900000",
				}, 
				{
          value: '4',
          label: '临河里华业玫瑰中心 · 北京通州',
					address: '北京市通州区华业东方玫瑰C区59号楼119、103底商',
					nearByBus: '临河里路口/临河里路北口(公交)、常营站(地铁)',
					phone: '15101073525',
					latitude: "39.8786940000",
        	longitude: "116.6846050000",
				},
				{
          value: '5',
          label: '梨园柳岸方园中心 · 北京通州',
					address: '北京市通州区梨园路120号远洋东方公馆附近',
					nearByBus: '玉桥南里（公交）梨园站（地铁）',
					phone: '13511070338',
					latitude: "39.8943750000",
        	longitude: "116.6849930000",
				},
				{
          value: '6',
          label: '管庄远洋一方中心 · 北京通州',
					address: '北京市朝阳区塔营街7号楼106(远洋一方润园社区服务站旁)',
					nearByBus: '管庄站（地铁八通线），塔营站（公交）',
					phone: '13717846064',
					latitude: "39.9076670000",
        	longitude: "116.5990460000",
				},
			],
			schoolInfo: {
				address: '北京市朝阳区常营常惠路2号楼103北辰福第底商',
				nearByBus: '常营北路(公交)、常营(地铁)',
				phone: '15101073525',
			},
			schoolValue: '常营北辰福第中心 · 北京朝阳',
			formFeedBack: {
				telephone: '',
				comment: '',
			},
			formAppointment: {
				linkPhone: '',
				studentName: '',
				schoolId: '',
				childAge: '',
				productId: '',
			},
			formAppointment_bottom: {
				linkPhone: '',
				studentName: '',
				schoolId: '',
				childAge: '',
				productId: '',
			},
			verificodeData: {
				verificationCode: '',
				phone: '',
			},
			formConsultation: {
				linkPhone: '',
				studentName: '',
				schoolId: '',
				childAge: '',
			},
			appointmentStep: 1,
			consultationStep: 1,
			feedbackStep: 1,
			rules: {
				phone: [{
					required: true,
					message: '请输入手机号码',
					trigger: 'change'
				}]
			},


			veri_time: 0,

			schoolSelectIndex: 1,

			

			
		}
	},

	// watch: {
	// 	maskShowStatus(newVal, oldVal) {
	// 		if(newVal) {
	// 			document.body.style.overflow = 'hidden'
	// 		}else{
	// 			document.body.style.overflow = 'auto'
	// 		}
	// 	},
	// },

	beforeCreate() {
		myVue = this;
		let isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(window.navigator.userAgent);

		if (isMobile) { 
			this.$router.push({
			  name: 'mobileHome'
			})
		}else{
			this.$router.push({
				name: 'home'
			})
		}
	},
	created() {
		window.changeEquipmentData = e => {
			this.changeEquipmentData(e);
		};

		this.initSelect();


		
	},
	mounted() {
		let tab_id = this.$route.params.tab_id;
		if(tab_id) {
			this.clickMenu(tab_id)
		}


		window.addEventListener('load', function () {
			myVue.imgload();
		})

		window.onresize = function() {
			myVue.imgload();
		}

		window.onscroll = function(e) {
			// let scrollTop = document.documentElement.scrollTop
			let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
			if(scrollTop > 100) {
				myVue.bottomBarShow = true ;
			}else{
				myVue.bottomBarShow = false;
			}

			// console.log(scrollTop)
		}
		


	},
	methods: {
		clickSwiper(index) {
			// console.log(index)
			// console.log(this.swiper.activeIndex);
		},
		showFeedbackPop() {
			this.showPopName = '意见反馈';
			this.maskShowStatus = true;
			this.feedbackStep = 1;
			this.clearForm(this.formFeedBack)
		},
		feedbackSubmit() {
			let phoneReg = /^1[34578]\d{9}$/;
			let veriPhone = phoneReg.test(this.formFeedBack.telephone)
			
			if(!veriPhone) {
				this.showAlertMsg('请输入正确的手机号');
				return false;
			}
			if(!this.formFeedBack.comment) {
				this.showAlertMsg('请输入您的宝贵建议');
				return false;
			}

			let data = this.formFeedBack;
			this.$axios.post('http://39.105.125.149:8090/banma/insertFeedBack',data).then(res => {
				if(res.data.code == 200) {
					this.feedbackStep = 3;
				}else{
					this.showAlertMsg(res.data.msg)
				}
			}).catch(err => {
				this.$message.error(err);
			})
		},

		appointmentSubmit(stepName,step) {
			let data
			if(stepName == 'consultationStep' || stepName == 'appointmentStep') {
				if(this.formAppointment.linkPhone) {
					data = this.formAppointment;
				}else{
					data = this.formAppointment_bottom;
				}
			}else{
				data = this.formAppointment_bottom;
			}

			if(!this.verificodeData.verificationCode) {
				this.showAlertMsg('验证码不能为空');
				return false;
			}
			
			data.verificationCode = this.verificodeData.verificationCode
			data.linkPhone = data.mobile
			data.sex = '1'

			this.schoolAreaList.forEach(item => {
				if(data.schoolId == item.schoolId) {
					data.schoolName = item.schoolName
				}
			})

			this.classList.forEach(item => {
				if(data.productId == item.productId) {
					data.productName = item.productName
				}
			})

			console.log(data);
			// return false;

			this.$axios.post('http://39.105.125.149:8090/banma/insertStudent', data).then(res => {
				if(res.data.code == 200) {
					this[stepName] = step;
				}
			}).catch(err => {
				this.$message.error(err);
			})
		},

		changeSchool() {
			this.initProduct();
		},

		initProduct() {
			// 试听课程
			this.$axios.get('http://39.105.125.149:8090/bmSchoolOpen/queryProductBySchoolId', {
				params: {
					schoolId: this.formAppointment.schoolId,	
				}
			}).then(res => {
				this.classList = res.data.data
			}).catch(err => {
				this.$message.error(err);
			})
		},

		initSelect() {
			// 附近分校
			this.$axios.get('http://39.105.125.149:8090/banma/querySchoolList', {
				params: {
					// dicKey: 'nearbyBranch',	
					schoolId: '',	
				}
			}).then(res => {
				this.schoolAreaList = res.data.data
			}).catch(err => {
				this.$message.error(err);
			})

		

			// 年龄
			// this.$axios.get('http://39.105.125.149:8090/bmDic/queryByDicKey', {
			// 	params: {
			// 		dicKey: 'studentAge',	
			// 		dicCode: '',	
			// 	}
			// }).then(res => {
			// 	this.studentAgeList = res.data.data
			// }).catch(err => {
			// 	this.$message.error(err);
			// })
		},

		bottomAppointment() {
			let phoneReg = /^1[34578]\d{9}$/;
			let veriPhone = phoneReg.test(this.formAppointment_bottom.linkPhone)

			if(!veriPhone) {
				this.showAlertMsg('请输入正确的手机号');
				return false;
			}

			let str = this.formAppointment_bottom.linkPhone
			this.verificodeData.phone = str.replace(/(\w{3})\w*(\w{4})/, '$1xxxx$2')

			this.showPopName = '预约试听';
			this.appointmentStep = 2;
			// this.clearForm(this.formAppointment)
			// this.clearForm(this.verificodeData)
			this.maskShowStatus = true; 

			// console.log(this.formAppointment_bottom)
		},
		closeBottomBar() {
			this.bottomBarShow = false;
			this.forceCloseBottomBar = true;
		},
		imgload() {
			if(this.$refs.banner) {
				this.bannerHeight = this.$refs.banner.offsetHeight + 'px'
			}
		},
		appointmentClick() {
			this.maskShowStatus = true; 
			this.showPopName = '预约试听';
			this.appointmentStep = 1;
			this.clearForm(this.formAppointment)
			this.clearForm(this.verificodeData)
		},
		clickConsultant() {
			this.showPopName = '课程咨询';
			this.appointmentStep = 1;
			this.clearForm(this.formAppointment)
			this.clearForm(this.verificodeData)
			this.maskShowStatus = true; 
		},
		consultationClick() {
			this.showPopName = '咨询';
			this.consultationStep = 1;
			this.clearForm(this.formConsultation)
			this.clearForm(this.verificodeData)
			this.maskShowStatus = true; 
		},

		initValCode() {
			let linkPhone = this.formAppointment_bottom.linkPhone || this.formAppointment.linkPhone
			this.$axios.get('http://39.105.125.149:8090/banma/sendVerificationCode', {
				params: {
					linkPhone: linkPhone
				}
			}).then((res) => {
				if(res.data.code == 200) {
					this.veri_time = 60;
					this.timeDown(this.veri_time)
				}else{
					this.showAlertMsg(res.data.msg)
				}
			}).catch(err => {
				this.$message.error(err);
			})
		},

		nextStep(stepName,step) {
			if(step == 2) {
				let phoneReg = /^1[34578]\d{9}$/;
				let veriPhone = phoneReg.test(this.formAppointment.linkPhone)
				
				if(!veriPhone) {
					this.showAlertMsg('请输入正确的手机号');
					return false;
				}
				
				let str = this.formAppointment.linkPhone
				this.verificodeData.phone = str.replace(/(\w{3})\w*(\w{4})/, '$1xxxx$2')
			}
			if(step == 3) {
				if(stepName == 'appointmentStep') {
					if(this.verificodeData.verificationCode == '') {
						this.showAlertMsg('请输入验证码');
						return false;
					}
					this.appointmentSubmit();
				}

				if(stepName == 'consultationStep') {
					if(this.verificodeData.verificationCode == '') {
						this.showAlertMsg('请输入验证码');
						return false;
					}
				}
			}
			
			this[stepName] = step;
		},
		replayVideo(item, index) {
			item.ended = false;
			this.$refs.video[index].play()
		},
		videoEnd(item) {
			item.ended = true;
			console.log('aaa')
			console.log(item)
		},
		selectChange(e) {
			console.log(e)
			this.schoolSelectIndex = e;
			let posArr = [];
			this.schoolList.forEach((item, index) => {
				if(item.value == e) {
					posArr.push(item.longitude)
					posArr.push(item.latitude)
					this.schoolInfo = {
						address: item.address,
						nearByBus: item.nearByBus,
						phone: item.phone
					}
				}
			})

			this.$refs.iframer.contentWindow.moveToSchool(posArr)
		},
		changeEquipmentData(e) {
			// console.log(e.target)
			this.schoolValue = e.target.school;

			this.schoolList.forEach((item, index) => {
				if(item.label == e.target.school) {
					this.schoolInfo = {
						address: item.address,
						nearByBus: item.nearByBus,
						phone: item.phone
					}
				}
			})
		},
		clickMenu(index) {
			this.tab_id = index;

			var link = "section" + (index+1);
      const anchorEle = document.querySelector("#" + link); 
      if(index == 0) {
				return false;
			}
			// document.documentElement.scrollTop = anchorEle.offsetTop + document.querySelector("#forid_0").offsetHeight - 100;
			anchorEle.scrollIntoView(true);
      
		},
		teamClick(index) {
			this.team_id = index;
		},
		videoPlay(index) {
			// this.$refs.video[index].play()
			// this.videoList[index].playStutas = false;
			this.$router.push({
				path: '/videoDetail?video=' + (Number(index) + 1),
				params: {
					index: index
				}
			})
		},
		backTop() {
			// window.scrollTo(0, 0);
			window.scrollTo({ 
					top: 0, 
					left: 0,
					behavior: "smooth" 
			});
			this.tab_id = 0;
		},

		showAlertMsg(message) {
			this.$message({
				dangerouslyUseHTMLString: true,
				message: '<span class="alert_msg_box"><i class="icon_wran"></i><span class="alert_msg">'+ message +'</span></span>',	
				center: true,
				duration: 1000,
				offset: 100,
			});
		},

		timeDown(times) {
			let timer = setInterval(() => {
				this.veri_time -= 1;
				if (this.veri_time == 0) {
					this.veri_time = 60;
					clearInterval(timer);
				}
			}, 1000);
		},
		
		clearForm(data) {
			for (let i in data) {
				if (data.hasOwnProperty(i) === true) {
					data[i] = "";
				}
			}
		}


	},

	computed: {
		VideoOrder(item) {
			
		},
		// bannerHeight() {
		// 	var height= this.$refs.banner.offsetHeight + 'px';
		// 	// return this.$refs.banner.offsetHeight;
		// 	return height
		// }
	},

	components: {
		// header,
		copyRight,
		topHeader
	}

	
}
</script>



<style scoped>

.zebra_desc {
	margin-bottom: 50px;
	text-indent: 2em;
	font-size: 18px;
	line-height: 40px;
}
.zhuanjia_box {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}
.zhuanjia_box .right {

}
.zhuanjia_box .right p{
	font-size: 18px;
	color: #666;
}
.zhuanjia_box .right .zhuanjia_name {
	color: #f9a256;
	margin-bottom: 15px;
}
.zhuanjia_box .left {
	width: 180px;
	height: 180px;
	margin-right: 32px;
}
.zhuanjia_box .left img {
	width: 100%;
}
	.slide-to-right-enter-active {
		transition: all .4s ease;
	}
	.slide-to-right-leave-active {
		transition: all .4s ease;
	}
	.slide-to-right-enter, .slide-to-right-leave-to
	/* .slide-fade-leave-active for below version 2.1.8 */ {
		transform: translateX(130px);
		opacity: 0;
	}
/*================== bottom_bar ====================*/
	.slide-fade-enter-active {
		transition: all .4s ease;
	}
	.slide-fade-leave-active {
		transition: all .4s ease;
	}
	.slide-fade-enter, .slide-fade-leave-to
	/* .slide-fade-leave-active for below version 2.1.8 */ {
		transform: translateY(60px);
		opacity: 0;
	}

	.bottom_bar{
		position: fixed;
		bottom: 0;
		left: 0;
		height: 60px;
		width: 100%;
		background: rgba(0,0,0,.6);
		z-index: 19;
		padding: 10px 0;
    box-sizing: border-box;
	}
	.bottom_bar .icon_close_mini {
		display: inline-block;
		width: 14px;
		height: 14px;
		background: url('../assets/image/icon_close_mini.png') 0 0 no-repeat;
		background-size: 100%;
		cursor: pointer;
		margin-top: 15px;
		margin-left: 15px;
	}

	.bottom_bar .btn_bottom_appointment{
		background: #fec333;
		cursor: pointer;
		color: #fff;
		height: 40px;
		border-radius: 20px;
		padding: 0 20px;
		box-sizing: border-box;
		font-size: 16px;
		margin-left: 20px;

	}



/*================== bottom_bar ====================*/


/*================== 弹窗 ====================*/

.consultation_popup .sub_title {
	font-size: 18px;
	color: #333333;
	margin-bottom: 28px;
}

.consultation_popup .sub_title span {
	font-size: 24px;
	color: #FF7E1B;
}

.mask .feedback_popup {
	
}
.mask .feedback_popup .step1 p {
	text-align: left;
	color: #666666;
	font-size: 16px;
	line-height: 30px;
}
.mask .feedback_popup .step1 p.sub_title {
	font-size: 18px;
	margin-left: -20px !important;
	margin-top: 18px;
}

.mask .feedback_popup .step1 p:not(.sub_title) {
	margin-bottom: 30px;
}


.mask .btn_submit_appointment{
	width: 100%;
	height: 53px;
	line-height: 53px;
	font-size: 24px;
}


.mask .step2 {
	/* position: relative; */
}
.mask .step2 .step {
	display: inline-block;
	width: 120px;
	height: 129px;
	background: url('../assets/image/step.png') 0 0 no-repeat;
	background-size: 100%;
	/* margin: 0 auto; */
	margin-left: -80px;
	margin-bottom: -4px;
}






/*================== 弹窗 ====================*/



/*================== side_bar ====================*/

	.side_bar {
		position: fixed;
		right: 2px;
		width: 70px;
		/* height: 325px; */
		border-radius: 8px;
		top: 20%;
		z-index: 9999999;
		background: #fff;
		box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.19);
	}
	.side_bar .side_bar_list li span,.side_bar .side_bar_list li i {
		display: block;
	}

	.side_bar .side_bar_list{
		text-align: center;
		padding: 20px 0;
		box-sizing: border-box;
	}
	.side_bar .side_bar_list li{
		position: relative;
	}
	.side_bar .side_bar_list li .wxQrcode{
		width: 130px;
		position: absolute;
		left: 0;
		top: -70%;
		display: none;
		/* transition: all .3s ease-in; */
		/* -webkit-transition-property: left; */
  	/* transition-property: left; */
	}

	.side_bar .side_bar_list li:hover .wxQrcode{
		left: -135px;
		display: block;
	}

	
	.side_bar .side_bar_list li{
		margin-bottom: 20px;
		cursor: pointer;
	}
	.side_bar .side_bar_list li:last-child {
		margin-bottom: 0 !important;
	}
	.side_bar .side_bar_list li span{
		font-size: 13px;
		color: #7F7D7D;
	}
	.side_bar .side_bar_list li i {
		margin: 0 auto;
		margin-bottom: 10px;
	}
	.side_bar .side_bar_list li:nth-child(1) i {
		width: 22px;
		height: 24px;
		background: url('../assets/image/icon_side1.png') 0 0 no-repeat;
		background-size: 100%;
	}
	.side_bar .side_bar_list li:nth-child(2) i {
		width: 26px;
		height: 25px;
		background: url('../assets/image/icon_side2.png') 0 0 no-repeat;
		background-size: 100%;
	}
	.side_bar .side_bar_list li:nth-child(3) i {
		width: 24px;
		height: 22px;
		background: url('../assets/image/icon_side3.png') 0 0 no-repeat;
		background-size: 100%;
	}
	.side_bar .side_bar_list li:nth-child(4) i {
		width: 27px;
		height: 27px;
		background: url('../assets/image/icon_side4.png') 0 0 no-repeat;
		background-size: 100%;
	}

/*================== side_bar ====================*/


/*================== section2 ====================*/
	.section1 {
		background: #F5F5F5;
	}
	.section2 {
		/* background: #F5F5F5; */
		padding-top: 50px;
		min-width: 1200px;
	}
	.section2 #certify {
		position: relative;
		padding-bottom: 44px;
	}
	
	.section .swiper-button-prev {
		width: 40px;
		height: 40px;
		background: url('../assets/image/icon_prev.png') 0 0 no-repeat;
		background-size: 100%;
		/* left: 8%; */
	}
	.section .swiper-button-next {
		width: 40px;
		height: 40px;
		background: url('../assets/image/icon_next.png') 0 0 no-repeat;
		background-size: 100%;
		/* right: 8%; */
	}

	.section2 .info_box {
		padding: 86px 50px 20px;
		box-sizing: border-box;
		height: 315px;
		background: url('../assets/image/info_bg.png') 0 0 no-repeat;
		background-size: 100%;
		margin-top: 8px;
	}
	.section2 .swiper-button-next{
		right: 8%;
	}
	.section2 .swiper-button-prev{
		left: 8%;
	}

	.section2 .info_box .lone_line {
		display: inline-block;
		width: 100%;
		margin: 0 auto;
		height: 1px;
		background: #e5e5e5;
		margin-bottom: 20px;
	}

	.section2 .info_box span i {
		color: #131212; 
		font-style: normal
	}
	.section2 .info_box div {
		height: 31px;
		line-height: 31px;
	}
	.section2 .info_box p {
		font-size: 16px;
		color: #666;
		height: 120px;
		text-align: justify;
	}
	.section2 .info_box .btn_ask {
		display: inline-block;
		width: 115px;
		height: 31px;
		background: url('../assets/image/icon_ask.png') 0 0 no-repeat;
		/* background-size: 100%; */
		cursor: pointer;
	}
	.section2 .info_box span {
		color: #7F7F7F;
		font-size: 14px;
		margin-right: 67px;
		float: left;
	}

	.section2 .swiper-slide{
		width: 306px !important;
		height: 386px !important;
		position: relative;
		cursor: pointer;
	}
	.section2 .swiper-slide .desc_box {
		width: 100%;
		height: 94px;
		background:rgba(149,149,149,0.7);
		position: absolute;
		left:0;
		bottom: 0;
		color: #fff;
		font-size: 16px;
		text-align: left;
		padding: 0 0 0 12%;
		box-sizing: border-box;
	}
	.section2 .swiper-slide .desc_box > div {
		display: inline-block;
		position: absolute;
		transform: translate(-50%, -50%);
		left: 50%;
		top: 50%;
	}
	.swiper-slide .desc_box p {
		white-space:nowrap;
	}
	.swiper-button-prev, .swiper-button-next{
		top: 27% !important;
	}
	.swiper-slide .desc_box p:first-child {
		/* margin-top: 20px; */
	}
	.swiper-slide .desc_box p:first-child i {
		display: inline-block;
		width: 19px;
		height: 15px;
		background: url('../assets/image/icon_people.png') 0 0 no-repeat;
		margin-right: 8px;
	}

	.swiper-slide .desc_box p:last-child {
		margin-top: 10px;
	}
	.swiper-slide .desc_box p:last-child i {
		display: inline-block;
		width: 20px;
		height: 20px;
		background: url('../assets/image/icon_area.png') 0 0 no-repeat;
		vertical-align: top;
		margin-right: 8px;
	}

/*================== section2 ====================*/


/*================== footer ====================*/
	.conpany_info {
		height: 280px;
		width: 100%;
		background: #424242;
	}
	.conpany_info .info {
		color: #fff;
		font-size: 14px;
	}
	.conpany_info .wrapper {
		padding-top: 75px;
	}
	.company_menu li{
		display: inline-block;
		cursor: pointer;
		margin-right: 96px;
	}
	.info_list {
		margin-top: 68px;
	}
	.info_list li {
		margin-bottom: 20px;
	}
	.info_list span {
		margin-right: 35px;;
		cursor: pointer;
	}
	.conpany_info .qrcode {
		color: #fff;
		margin-left: 50px;
	}
	.qrcode .qrcode_img {
		width: 136px;
		height: 136px;
		margin: 0 auto;
		margin-top: 30px;;
	}
	.qrcode .qrcode_img img {
		width: 100%;
	}
	.copy_right {
		height: 60px;
		width: 100%;
		background: #000;
		text-align: center;
		color: #fff;
		line-height: 60px;
	}

/*================== footer ====================*/


/*================== section7 ====================*/
	.section7 {
		margin-top: 80px !important;
	}

	.section7 .map_box {
		width: 618px;
		height: 520px;
	}
	.section7 .school_box  {
		width: 468px;
		height: 520px;
		margin-left: 50px;
		position: relative;
	}

	.section7 .school_box .school_img_box {
		position: absolute;
		height: 277px;
		width: 100%;
		bottom: 0;
	}
	.section7 .school_box .school_img_box .school_img {
		width: 100%;
	}

	.section7 .school_img_box .school_qrcode{
		position: absolute;
		right: 0;
		bottom: 0;
		width: 72px;
		height: 72px;
	}

	.section7 .school_info {
		margin-top: 39px;
		margin-left: 14px;

	}
	.section7 .school_info p {
		margin-bottom: 19px;
		font-size: 16px;
		color: #222222;
	}

	.section7 .change_school_area {
		position: absolute; 
		top: 0; 
		line-height: 50px;
		left: 10px;
		font-size: 18px;
		z-index: 2;
		font-weight:400;
		color: #222222;
	}

	.section7 .desc {
		font-size: 16px;
		color: #666666;
		margin: 40px 0;
		text-align: center;
	}

	.section7 .desc span {
		line-height: 29px;
	}
	.section7 .desc i {
		display: inline-block;
		width: 22px;
		height: 29px;
		background: url('../assets/image/wait.png') 0 0 no-repeat;
		background-size: 100%;
		vertical-align: top;
	}





/*================== section7 ====================*/

/*================== section6 ====================*/

	.section6{
		margin-top: 10px !important;
	}
	.section6 .curriculum_list{
		margin-bottom: 30px;
	}
	.section6 .curriculum_list li {
		height: 360px;
		padding: 20px;
		box-sizing: border-box;
		margin-bottom: 10px;
		
	}
	.section6 .curriculum_list .btn_test{
		height: 50px;
		width: 261px;;
		line-height: 50px;
		font-size: 16px;
		margin-top: 40px;;
	}
	.section6 .curriculum_list li:nth-child(odd) {
		box-shadow:0px 2px 12px 1px rgba(0, 0, 0, 0.19);
		border-radius:10px;
	}
	.section6 .curriculum_list li:nth-child(even) {
		background: #FAFAFA;
		border-radius:10px;
	}
	.section6 .curriculum_list li .desc_box{
		margin-left: 83px;;
	}
	.section6 .curriculum_list .img_box {
		position: relative;
		width: 480px;
		height: 320px;
	}
	.section6 .curriculum_list .img_box img {
		width: 100%;
	}
	.section6 .curriculum_list .img_box p {
		position: absolute;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,.6);
		height: 60px;
		line-height: 60px;
		width: 100%;
		color: #fff;
		text-align: center;
		font-size:30px;
	}

	.section6 .curriculum_list .desc_box i {
		display: block;
		width: 40px;
		height: 37px;
		background: url('../assets/image/icon_maohao.png') 0 0 no-repeat;
		background-size: 100%;
		margin-top: 50px;;
	}	
	.section6 .curriculum_list .desc_box p {
		color: #666;
		font-size: 16px;
		margin-top: 18px;
	}



/*================== section5 ====================*/

/*================== section5 ====================*/
	.section5{
		padding-top: 60px !important;
		padding-bottom: 60px;
		/* background: #FAFAFA; */
	}

	.section5 .advantage_list{
		text-align: center;
	}
	.section5 .advantage_list li{
		display: inline-block;
		width: 295px;
	}

	

	.section5 .advantage_list li span {
		display: block;
		text-align: center;
		margin-top: 20px;
		font-size: 14px;
	}

	.section5 .advantage_list li span.title {
		font-size: 16px;
	}

	.section5 .advantage_item{
		padding: 40px 10px;
		box-sizing: border-box;
	}
	.section5 .advantage_item:hover{
		box-shadow:0px 1px 16px 0px rgba(0, 0, 0, 0.09);
		
	}

	/* .section5 .advantage_list .advantage_item:nth-child(4) {
		width: 330px !important;
	} */
	

	.section5 .advantage_item .icon {
		margin: 0 auto;
		position: relative;
	}
	.section5 .advantage_item .icon {
		width: 131px;
		height: 132px;
	}
	/* .section5 .advantage_item:nth-child(2) .icon {
		width: 134px;
		height: 122px;
	}
	.section5 .advantage_item:nth-child(3) .icon {
		width: 142px;
		height: 105px;
	}
	.section5 .advantage_item:nth-child(4) .icon {
		width: 132px;
		height: 100px;
	} */
	.section5 .advantage_item .icon img {
		width: 100%;
		position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
	}

	.section5 .desc {
		color: #908E8E;
	}



/*================== section5 ====================*/


/*================== section4 ====================*/
	.section4 .video_list {

	}

	.section .more_info{
		text-align: center;
	}
	.section .more_info span {
		font-size:16px;
		color: #333;
	}

	.section .btn_contact_us{
		width: 183px;
		height: 37px;
		line-height: 37px;
		margin-left: 5px;
	}

	.section4 .info_box{
		padding: 0 30px;
		box-sizing: border-box;
		margin-top: 30px;
		line-height: 40px;
	}
	.section4 .info_box .order {
		color: #333;
		font-size:30px;
		margin-left: 5px;
		margin-right: 30px;
	}
	.section4 .info_box .info .video_title {
		color: #666;
		font-size:16px;
		text-align: left;
		margin-bottom: 19px;
	}
	.section4 .info_box .info .desc {
		color: #908E8E;
		font-size:14px;
		text-align: left;
	}

	.section4 .video_list .video_item {
		width: 380px;
		height: 320px;
		margin-right: 20px;
		display: inline-block;
		box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.19);
		border-radius: 8px;
	}
	.section4 .video_list .video_item:last-child {
		margin-right: 0;
	}

	.section4 .video_list .video_item video {
		width: 100%;
		border-radius: 5px 5px 0 0;
	}
	.section4 .more_info {
		margin: 20px 0;
	}
	.section4 .video_box {
		/* height: 230px; */
		position: relative;
	}
	.section4 .video_box img {
		width: 100%;
		height: 214px;
		overflow: hidden;
		border-radius: 8px 8px 0 0;
	}
	

	.section4 .video_box .icon_play {
		position: absolute;
		transform: translate(-50%, -50%);
		cursor: pointer;
		left: 50%;
		top: 50%;
		background: url('../assets/image/icon_play.png') 0 0 no-repeat;
		width: 48px;
		height: 48px;
		background-size: 100%;
	}


/*================== section4 ====================*/




/*================== section3 ====================*/
	.section3 {
		margin-bottom: 50px !important;
		margin-top: 38px !important;
	}

	.section3 .swiper-slide {
		text-align: center;
	}

	.section3 .swiper-slide .avatar{
		width: 100% !important;
	}
	.section3 .swiper-slide:hover{
		box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.19);
	}

	.section3 .swiper-slide .desc {
		display: block;
		padding: 0 20px;
		box-sizing: border-box;
		text-align: justify;
	}
	.section3 .swiper-slide .desc1 {
		margin-bottom: 0 !important;
	}

	.section3 .swiper-button-next2, .section3 .swiper-button-prev2 {
		top: 35% !important;
	}

	.section3 .swiper-container {
		width: 88%;
		padding: 5px 8px;
	}

	.section3 .swiper-button-prev {
		
	}

	.section3 .swiper-button-prev2 


	.section3 .dashed_line {
		width: 100%;
		height: 13px;
		border: 1px dashed #000;
	}


	.section3 .team_list li {
		position: relative;
		width: 285px;
		height: 460px;
		margin-right: 20px;
		cursor: pointer;
		display: inline-block;
		margin-bottom: 20px;
		float: left;
		box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.19);
	}
	.section3 .team_list .desc {
		padding: 0 20px;
		box-sizing: border-box;
		text-align: justify;
		/* text-justify:  */
	}

	/* .section3 .team_list li:first-child .desc
	{
		text-align: center !important;
	} */

	.section .line {
		width: 229px;
		height: 1px;;
		background: #e5e5e5;
		margin: 20px auto;
	}
	.section3 .team_list li:hover {
		background: #F9A256;
	}
	.section3 .team_list li:hover img {
		/* padding: 20px 20px;
		box-sizing: border-box; */

	}

	.section3 .team_list li:hover .icon_pos {
		background: url('../assets/image/icon_pos2.png') 0 0 no-repeat;
		background-size: 100%;
	}

	

	.section3 .team_list li:hover span:not(.icon_pos) {
		color: #fff;
	}

	.section3 .team_list li:hover .mask_bg {
		display: block;
	}
	.section3 .mask_bg {
		width: 285px;
		height: 243px;
		background: url('../assets/image/mask_bg.png') 0 0 no-repeat;
		background-size: 100%;
		position: absolute;
		left: 0;
		top: 0;
		/* z-index: 3; */
		display: none;
	}


	.section3 .team_list li:nth-child(4n) {
		margin-right: 0;
	}
	.section3 .team_list span, .section3 .team_list img {
		display: block;
		text-align: center;
		width: 100%;
	}
	.section3 .avatar {
		/* width: 247px !important; */
		height: 242px;
		margin: 0 auto;
		margin-bottom: 20px;
		/* margin-top: 20px; */
	}

	.section3 .team_list2 .avatar {
		margin-top: 0;
	}
	.section3 .name {
		font-size:24px;
		margin-bottom: 25px;
	}

	.section3 .desc {
		color: #959393;
		font-size: 14px;
	}
	.section3 .desc1 {
		margin-bottom: 16px;
	}
	.section3 .desc2 {
		margin-bottom: 25px;
	}

	.section3 .icon_pos {
		position: absolute;
		color: #F9A256;
		line-height: 30px;
		right: 20px;
		width: 45px !important;
		height: 43px;
		background: url('../assets/image/icon_pos.png') 0 0 no-repeat;
		background-size: 100%;
		z-index: 2;
	}


/*================== section3 ====================*/





/*================== section ====================*/
	.section .title {
		font-size:24px;
		color: #010101;
		text-align: center;
		font-weight: 500;
		margin-bottom: 35px;
	}


/*================== section ====================*/


/*================== banner ====================*/
	.banner {
		min-width: 1200px;
	}

	.banner_click {
		position: absolute;
		left: 42%;
		bottom: 21.2%;
		cursor: pointer;
	}
	.banner_click img {
		width: 100%;
	}

	.banner_click1 {
		width: 150px;
	}
	 .banner_click2 {
		width: 85px;
		left: 60%;
		bottom: 4%;
	}

	.banner .banner_box {
		/* height: 100%; */
	}

	.banner .el-carousel{
		width: 100%;
	}




/*================== banner ====================*/





</style>


